<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        新增订单
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 合同信息 --start-->
    <div class="conter_box1">
      <p><em>1</em> 合同信息</p>
      <ul>
        <li>
          <span>订单编号</span>
          <el-input
            placeholder="请输入订单编号"
            v-model="orderNumber"
            style="width: 70%"
          ></el-input>
        </li>
        <li>
          <span>合同批号</span>
          <el-input
            placeholder="请输入合同批号"
            v-model="contractNumber"
            style="width: 70%"
          ></el-input>
        </li>
        <li>
          <span>订单类型</span>
          <el-input v-model="orderType" style="width: 70%" placeholder="请输入订单类型"></el-input>

          <!--          <el-select-->
          <!--            v-model="ordertype"-->
          <!--            placeholder="请选择订单类型"-->
          <!--            style="width: 70%"-->
          <!--          >-->
          <!--            <el-option-->
          <!--              v-for="item in ordtypevalue"-->
          <!--              :key="item.key"-->
          <!--              :label="item.value"-->
          <!--              :value="item.value"-->
          <!--            ></el-option>-->
          <!--          </el-select>-->
        </li>
        <li>
          <span>签订日期</span>
          <el-date-picker
            v-model="qiandingTime"
            type="date"
            placeholder="请选择签订日期"
            style="width: 70%"
          ></el-date-picker>
        </li>
        <li>
          <span>合同类型</span>
          <el-input v-model="contractType" style="width: 70%" placeholder="请输入合同类型"></el-input>
        </li>
        <li>
          <span>交货日期</span>
          <el-date-picker
            v-model="jiaohuoTime"
            type="date"
            placeholder="请选择交货日期"
            style="width: 70%"
          ></el-date-picker>
        </li>
        <li>
          <span>签单人员</span>
          <el-input
            placeholder="请输入签单人员"
            v-model="qiandanRenyuan"
            style="width: 70%"
          ></el-input>
        </li>
        <li>
          <span>企业名称</span>
          <!--          <el-input v-model="clientName" style="width: 70%" placeholder="请输入企业名称"></el-input>-->

          <el-select

            v-model="clientName"
            placeholder="请选择企业名称"
            value-key="id"
            style="width:70%;"
            @change="GetProMiss(clientIdarr.$index, $event)">
            <el-option v-for="item in clientIdarr" :key="item.key" :label="item.enterpriseName"
                       :value="item"></el-option>
          </el-select>
        </li>
        <li>
          <span>联系人员</span>
          <el-input
            placeholder="请输入联系人员"
            v-model="lianxiren"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
        <li>
          <span>联系方式</span>
          <el-input
            placeholder="请输入联系方式"
            v-model="phone"
            style="width: 70%"
            disabled
          ></el-input>
        </li>
      </ul>
    </div>
    <!-- 合同信息 --end-->

    <!-- 产品信息 --start-->
    <div class="conter_box3">
      <p><em>2</em> 产品信息</p>
      <template>
        <el-table :data="products" style="width: 100%" max-height="310px">
          <el-table-column label="产品图号" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.productNumber"
                @change="GetProMess(scope.$index, $event)"
                value-key="id"
                placeholder="请选择状态"
              >
                <el-option
                  v-for="item in productList"
                  :key="item.id"
                  :label="item.productTuhao"
                  :value="item"
                >
                </el-option>
              </el-select>
            </template>
            <!--            <template slot-scope="scope">-->
            <!--              <el-input v-model="scope.row.productNumber"></el-input>-->

            <!--            </template>-->
          </el-table-column>
<!--          <el-table-column label="产品类型" align="center">-->
<!--            <template slot-scope="scope">-->
<!--              <el-input v-model="scope.row.type"></el-input>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column label="产品名称" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.productName" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="含税单价 (元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.danwei" disabled></el-input>
            </template>
          </el-table-column>
          <el-table-column label="产品数量" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.number" @input="jisuan($event,scope.$index,1)"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="小计 (元)" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.xiaoji"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="addDomain"
              >新增
              </el-button
              >
              <el-button
                type="danger"
                @click="resetForm(scope)"
                v-if="scope.$index !== 0"
                size="small"
              >删除
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <!-- 产品信息 --end-->

    <!-- 付款信息 --start-->
    <div class="conter_box4">
      <p><em>3</em> 付款信息</p>
      <ul>
        <li>
          <span>订单金额</span>
          <el-input
            placeholder="请输入订单金额"
            v-model="contractMoney"
            style="width: 70%"
          ></el-input>
        </li>
        <li>
          <span>付款时间</span>
          <el-date-picker
            v-model="fukuaiTime"
            type="date"
            placeholder="请输入付款时间"
            style="width: 70%"
          ></el-date-picker>
        </li>
        <li>
          <span>支付方式</span>
          <el-cascader
            style="width: 70%"
            v-model="pay"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
          ></el-cascader>
        </li>
      </ul>
    </div>

    <!-- 付款信息 --end-->

    <!-- 附件上传 --start-->
    <div id="conter_box5">
      <p><em>4</em> 合同上传</p>
      <ul>
        <li>
          <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
            <el-upload
              action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="1"
              :on-remove="function(res,file){ return handleRemove(res,file)}"
              :on-success="function (res, file) { return handleAvatarSuccess0(res, file,'imgpath')}">
              <el-image v-if="imgpathfull" src="imgpathfull"></el-image>
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </li>
        <li>
          <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
            <el-upload
              action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="1"
              :on-remove="function(res,file){ return handleRemove(res,file)}"
              :on-success="function (res, file) { return handleAvatarSuccess0(res, file,'imgpath1')}">
              <el-image v-if="imgpathfull1" src="imgpathfull1"></el-image>
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </li>
        <li>
          <div style="width: 148px;height: 148px;display: inline-block;overflow: hidden">
            <el-upload
              action="/JX_java/common/fileUpLoad" list-type="picture-card" :limit="1"
              :on-remove="function(res,file){ return handleRemove(res,file)}"
              :on-success="function (res, file) { return handleAvatarSuccess0(res, file,'imgpath2')}">
              <el-image v-if="imgpathfull2" src="imgpathfull2"></el-image>
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </li>
      </ul>
      <!-- 附件上传 --end-->

      <!-- 底部按钮 --start-->
      <div class="bottom">
        <el-button type="primary" size="medium" @click="add()">确定</el-button>
        <el-button type="info" size="medium" @click="revert()">返回</el-button>
      </div>
      <!-- 底部按钮 --end-->
    </div>

  </div>
</template>


<script>
import axios from "axios";

export default {
  components: {},

  data() {
    return {

      imgpathfull: '',
      imgpath: '',
      imgpathfull1: '',
      imgpath1: '',
      imgpathfull2: '',
      imgpath2: '',
      //图片格式
      topice: [],

      // 表格输入框
      // tableData: [{}],
      id: "",
      clientId: "",
      orderNumber: "",
      contractNumber: "",
      ordertype: "",
      qiandingTime: "",
      contractType: "",
      jiaohuoTime: "",
      qiandanRenyuan: "",
      clientName: "",
      lianxiren: "",
      phone: "",
      contractMoney: "",
      pay: "",
      createonUser: "",
      fukuaiTime: "",
      createonUserid:"",
      // 付款方式
      options: [
        {
          value: "现金",
          label: "现金",
        },
        {
          value: "网银",
          label: "网银",
          children: [
            {
              value: "支付宝",
              label: "支付宝",
            },
            {
              value: "微信",
              label: "微信",
            },
          ],
        },
        {
          value: "承兑汇票",
          label: "承兑汇票",
          children: [
            {
              value: "电子",
              label: "电子",
            },
            {
              value: "纸质",
              label: "纸质",
            },
          ],
        },
      ],
      // 合同类型
      products: [{}],
      clientIdarr: [],
      productList: [],
      orderType:"",
      KhId:"",
    };
  },
  created() {
    this.userId = JSON.parse(localStorage.getItem("message")).Id;
    this.UserName = JSON.parse(localStorage.getItem("message")).Name;
    console.log(this.UserName,this.userId)
    this.getquan()
    // this.getCai()
  },
  methods: {
    accAdd(arg1,arg2) {
      var r1,r2,m;
      try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
      try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
      m=Math.pow(10,Math.max(r1,r2))
      return (arg1*m+arg2*m)/m
    },
    accMul(arg1, arg2) {
      var m = 0,s1 = arg1+"",s2 = arg2+"";
      try { m += s1.split(".")[1].length; } catch (e) {}
      try { m += s2.split(".")[1].length; } catch (e) {}
      return ( (Number(s1.replace(".", "")) * Number(s2.replace(".", ""))) / Math.pow(10, m) );
    },
    //计算
    jisuan(e,ind,typeid){


    if (typeid==1){
      if (!/^\d\d*$/.test(this.products[ind].number)) {
        this.products[ind].number = /^\d\d*!/.exec(this.products[ind].number);
      }
    }
    let total=0;
    for (let i = 0; i < this.products.length; i++) {
      let chengji=parseFloat(this.accMul(this.products[i].price,this.products[i].number));
      this.products[i].xiaoji=chengji
      total= this.accAdd(total,chengji);
    }
this.contractMoney=total;
  },//计算总金额



    //获取所有客户
    getquan() {
      axios(
        "/JX_java/common/getClientMessageList?userId=" + this.userId
      ).then((res) => {
        let result = res.data.data;
        this.clientIdarr = result;
        console.log(result,1111111111111111)
        // for (let i = 0 ;i<this.clientIdarr.length;i++) {
        //   this.rouadd=this.clientIdarr[i].createonUserid
        // }
        // console.log(this.clientIdarr)
      });
    },
    GetProMiss(ind, e) {
      this.KhId = e.id
      this.clientName = e.enterpriseName;
      this.lianxiren = e.contacts;
      this.phone = e.contactsPhone;
      console.log(this.KhId)
      this.getCai(this.KhId)
    },
    // 获取供应商产品
    getCai(id) {
      axios("/JX_java/common/getProductByclientId?clientId="+id).then((res) => {
        let result = res.data.data;
        this.productList = result;
        console.log(result,11111111111111111111)
      });
    },
    GetProMess(ind, e) {
      this.products[ind].id = e.id;
      this.products[ind].productNumber = e.productTuhao;
      this.products[ind].productName = e.productName;
      this.products[ind].danwei = e.danwei;
      this.products[ind].price = e.price;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      console.log(
        this.imageUrl
      )
    },
    handleExceed() {
    },
    handleChange() {
    },
    handlePreview() {
    },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === "image/jpeg";
    //   const isLt2M = file.size / 1024 / 1024 < 2;

    //   if (!isJPG) {
    //     this.$message.error("上传头像图片只能是 JPG 格式!");
    //   }
    //   if (!isLt2M) {
    //     this.$message.error("上传头像图片大小不能超过 2MB!");
    //   }
    //   return isJPG && isLt2M;
    // },
    handleRemove(res, file) {
      console.log(res);
    },
    handleAvatarSuccess0(res, file, name) {
      console.log(res)
      this[name] = res.data;
    },
    //新增采购-------动态添加
    addDomain() {
      const list = {
        productname: "",
      };
      this.products.push(list);
    },
    //新增采购-------动态删除
    resetForm(e) {
      console.log(e);
      this.products.splice(e.$index, 1);
    },

    //返回
    revert() {
      this.$router.go(-1);
    },
    // 新增
    add() {
      let tenparr=[];
      tenparr.push(this.imgpath);tenparr.push(this.imgpath1);tenparr.push(this.imgpath2)
      const arr = {
        "clientId": this.KhId,
        "clientName": this.clientName,
        "contractAdress": JSON.stringify(tenparr).toString(),
        "contractMoney": this.contractMoney,
        "contractNumber": this.contractNumber,
        "contractType": this.contractType,
        "createonTime": "",
        "createonUser": this.UserName,
        "createonUserid": this.userId,
        "fukuaiTime": this.fukuaiTime,
        "id": "",
        "jiaohuoTime": this.jiaohuoTime,
        "lianxiren": this.lianxiren,
        "orderNumber": this.orderNumber,
        "orderType": this.orderType,
        "pay": JSON.stringify(this.pay).toString(),
        "phone": this.phone,
        "products": [],
        "qiandanRenyuan": this.qiandanRenyuan,
        "qiandingTime": this.qiandingTime,
        "status": "",
      };
      this.products.forEach(e => {
        const product = {
          "danwei": "",
          "id": 0,
          "number": 0,
          "orderId": 0,
          "planTime": "",
          "price": 0,
          "productId": 0,
          "productName": "",
          "productNumber": "",
          "supplierId": 0,
          "type": 0,
          "xiaoji": 0
        }
        product.danwei = e.danwei;
        product.number = e.number;
        product.planTime = e.planTime
        product.price = e.price
        product.productName = e.productName
        product.productNumber = e.productNumber
        product.type = e.type
        product.xiaoji = e.xiaoji
        arr.products.push(product);
      })
      console.log(arr)
      // return
      axios
        .post(
          "/JX_java/sales/orderFrom/addOrderForm", arr
        )
        .then((res) => {
          if (res.data.data == "操作成功") {
            this.$message.success(res.data.data);
            this.$router.go(-1);
          } else {
            this.$message.error(res.data.data);
          }
        });
    },
  },

  beforeAvatarUpload(file) {
    const isJPG = file.type === "image/jpeg";
    const isLt2M = file.size / 1024 / 1024 < 2;

    if (!isJPG) {
      this.$message.error("上传头像图片只能是 JPG 格式!");
    }
    if (!isLt2M) {
      this.$message.error("上传头像图片大小不能超过 2MB!");
    }
    return isJPG && isLt2M;
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";


.ryuan {
  width: 20%;
  margin-top: 10px;
  padding-left: 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.step {
  width: 50%;
  position: absolute;
  top: 0;
  left: 25%;
}

.conter_box1 {
  background: $white;
  height: 250px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }

  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #909399;

    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
      span{
        display: inline-block;
        width: 25%;
      }
    }
  }
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}

.conter_box2 {
  background: $white;
  height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }

  ul {
    width: 100%;
    display: flex;
    color: #909399;

    li {
      width: 20%;
      font-size: 14px;
      margin-bottom: 10px;
    }
  }
}

.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }

  // ul {
  //   width: 100%;
  //   display: flex;
  //   color: #909399;
  //   li {
  //     width: 20%;
  //     font-size: 14px;
  //     margin-bottom: 10px;
  //   }
  // }
}

.conter_box4 {
  background: $white;
  // height: 90px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }

  ul {
    width: 100%;
    overflow: hidden;
    color: #909399;
    // margin-right: 1%
    li {
      width: 33%;
      float: left;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: right;

      p {
        text-align: left;
      }
    }
  }
}

#conter_box5 {
  background: $white;
  height: 200px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;

    em {
      display: inline-block;
      width: 25px;
      height: 25px;
      text-align: center;
      line-height: 25px;
      border-radius: 50% 50%;
      border: solid 1px #ccc;
    }
  }

  ul {
    width: 100%;
    display: flex;
    color: #909399;

    li {
      width: 33%;
      font-size: 14px;
      margin-bottom: 10px;
      text-align: center;
      //   border: solid 1px red;
    }
  }
}

.dispose_box1 {
  border: solid 1px #ccc;
}

.dispose_box2,
.dispose_box3 {
  border: solid 1px #ccc;
  margin-top: 10px;
}

.bottom {
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  // background: $white;
  position: relative;

  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
<style>
.el-dialog__footer {
  text-align: center;
}

.el-input__inner {
  font-size: 12px;
  /* color: rgb(192, 196, 204); */
}

#conter_box5 .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#conter_box5 .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

#conter_box5 .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

#conter_box5 .avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>
